<template>
  <el-form :model="form" label-width="auto" style="max-width: 600px" :inline="true">
    <el-form-item label="请选择常数类别">
      <el-select
          v-model="selectType"
          placeholder="请选择常数类别..."
          size="large"
          style="width: 240px"
          @change="typeChange"
      >
        <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.constanttypename"
            :value="item.id"
        />
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="toAdd">添加</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="constanttypeid" label="常数类别ID" width="180" />
    <el-table-column prop="constantcode" label="常数项编码" width="180" />
    <el-table-column prop="constantname" label="常数项名称" />
    <el-table-column label="操作" width="180">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="toEdit(scope.row)">编辑</el-button>
        <el-button link type="danger" size="small" @click="remove(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 添加或编辑表单 -->
  <el-dialog v-model="editDialogFormVisible" :title="dialogTitle" width="500">
    <el-form :model="editForm" label-width="auto">
      <el-form-item label="常数项编码">
        <el-input v-model="editForm.constantcode" />
      </el-form-item>
      <el-form-item label="常数项名称">
        <el-input v-model="editForm.constantname" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElNotification, ElMessageBox } from 'element-plus'
import service from '@/utils/request'

const selectType = ref('') // 当前选中常数类别ID
const options = ref([]) // 常数类别下拉列表
const tableData = ref([]) // 表格数据

const editDialogFormVisible = ref(false)
const dialogTitle = ref('添加常数项')

const editForm = ref({
  id: null,
  constanttypeid: null,
  constantcode: '',
  constantname: ''
})

// 选择类别时触发加载对应常数项
function typeChange(id) {
  if (!id) return
  service.post('/constantitem/getbytypeid', { id }).then(res => {
    tableData.value = res.data
  })
}

// 打开添加弹窗
function toAdd() {
  dialogTitle.value = '添加常数项'
  editForm.value = {
    id: null,
    constanttypeid: selectType.value,
    constantcode: '',
    constantname: ''
  }
  editDialogFormVisible.value = true
}

// 打开编辑弹窗
function toEdit(row) {
  dialogTitle.value = '编辑常数项'
  editForm.value = { ...row }
  editDialogFormVisible.value = true
}

// 保存数据
function save() {
  const url = editForm.value.id ? '/constantitem/update' : '/constantitem/add'
  service.post(url, editForm.value).then(res => {
    if (res.data) {
      ElNotification({
        title: '成功',
        message: '保存成功',
        type: 'success'
      })
      editDialogFormVisible.value = false
      typeChange(selectType.value)
    } else {
      ElNotification({
        title: '失败',
        message: '保存失败',
        type: 'error'
      })
    }
  })
}

// 删除
function remove(id) {
  ElMessageBox.confirm('确认删除该常数项吗？', '提示', {
    type: 'warning'
  }).then(() => {
    service.post('/constantitem/delete', { id }).then(res => {
      if (res.data) {
        ElNotification({
          title: '成功',
          message: '删除成功',
          type: 'success'
        })
        typeChange(selectType.value)
      }
    })
  }).catch(() => {})
}

onMounted(() => {
  // 加载类别
  service.get('/constanttype/list').then(res => {
    options.value = res.data
  })
})
</script>
